<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <my-notice v-if="cardInfo =='' "></my-notice>
    <div id="contract" v-else>
      <div class="card">
        <div class="header">
          <div class="img-box">
            <div>
              <img src="../../assets/icon/bank-icon.png" alt="">
            </div>

          </div>
          <div class="bank-box">
            <p class="bank-name">{{cardInfo.bank_name}}</p>
            <p class="card-type">{{cardInfo.type_name}}</p>
          </div>
        </div>
        <div class="card-number">{{cardInfo.bank_no}}</div>
        <div class="bottom"><span>持卡人</span> <span class="right">{{cardInfo.username}}</span></div>
      </div>
      <mt-cell title="姓名" :value="cardInfo.name"></mt-cell>
      <mt-cell title="身份证" :value="cardInfo.id_card"></mt-cell>
      <!-- <mt-cell title="签约公司" value="稻香有限公司"></mt-cell> -->
    </div>
    <mt-button class="replace" @click='toAddCard()' v-if="cardInfo =='' ">添加工资卡</mt-button>
    <mt-button class="replace" @click="toChangeCard()" v-else>更换工资卡</mt-button>


  </div>
</template>

<script>
   import {get_bankinfo} from '@/api/';
  export default {
    data() {
      return {
        tel:'',
        cardInfo:'',//银行卡信息
      }
    },
    methods: {
      toChangeCard(){
        this.$router.push('/changeCard');
      },
      toAddCard(){
        this.$router.push('/addCard');
      },
      getCardInfo(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_bankinfo({tel:this.tel}).then( res =>{
          console.log(res)
          this.cardInfo = res.data;
        })
      }

    },
    mounted() {
      this.getCardInfo();
    }
  }
</script>

<style scoped>
#contract{padding: 0 10px;margin-top: 10px;}
#contract .card{width: 100%;height: 173px;border-radius: 8px;background-color: rgb(47, 57, 83);position: relative;color: #e3e9f8;}
#contract .card .header{display: flex;}
#contract .card .header .img-box{flex: 1;padding: 1em;}
#contract .card .header .img-box > div{background-color: #fff;border-radius: 50%;width: 34px;height: 34px;text-align: center;display: flex;justify-content: center;align-items: center;}
#contract .card .header .img-box img{width: 22px;height: 22px;line-height: 34px;}
#contract .card .header .bank-box{flex: 8;padding-top: .7em;}
#contract .card .card-number{display: flex;justify-content: center;font-size: 26px;padding-top: 15px;}

#contract .card .bottom{border-bottom-left-radius: 8px;border-bottom-right-radius: 8px; line-height: 30px; position: absolute;bottom: 0;width: 100%;font-size: 12px;background-color: rgb(81, 91, 118);}/* #contract .card .bottom */
#contract .card .bottom span{margin-left: 10px;}
#contract .card .bottom .right{right: 1.5em;}

.mint-button{position: fixed;bottom: 2em;width: 150px;left: 50%;background-color: rgb(47, 57, 83);color: #fff;border-radius: 20px;transform: translateX(-50%);font-size: 16px;}
/* .replace{position:fixed;bottom: 2em;left: 50%;transform: translateX(-50%);background-color: rgb(47, 57, 83);color: #FFFAF5;border-radius: 20px;font-size: 12px;width: 100px;height: 30px;} */
</style>
